<template>
     <div class="detail">
      <div class="wrapper">
      <div class="container clearfix">
        <div class="swiper">
          <swiper>
              <swiper-slide><img :src="goodsInfo.subImages" alt=""></swiper-slide>             
          </swiper>
        </div>
        <div class="content">
          <h2 class="item-title">{{goodsInfo.name}}</h2>
             <div class="line"></div>
          <p class="item-info">{{goodsInfo.detail}}</p>
          <div class="line"></div>
          <div class="item-price">{{goodsInfo.price}}<span class="del">2999元</span></div>
          <div class="line"></div>
             <el-button type="primary" round  @click="pay">付款</el-button>
              <el-button type="success" plain @click="collectionGoods" :disabled="isdisabled">{{info}}</el-button>
        </div>
      </div>
    </div>
      <div class="comment">
        <div  @click="inputFocus" class="my-reply">
        </div>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
  import { Swiper } from 'swiper/vue/swiper';
  import { SwiperSlide } from 'swiper/vue/swiper-slide';

export default{
  name:'goods',
  data(){
    return {
       id:this.$route.params.id,//获取商品ID
       goodsInfo:{},
       info:'点击收藏',
       isdisabled:false
    }
  },
  components:{
    Swiper,
    SwiperSlide,
  },
  created(){
      this.gteIsCollection();
      this.getGoodsInfo();
  },
  methods:{
    getGoodsInfo(){
      axios.get('/goods/id?id='+ this.id).then(res=>{
          this.goodsInfo = res;
      })  
    },
    gteIsCollection(){
       axios.get('/collection/is?goodsId='+ this.id).then(res=>{
          this.info = res;
          if(res=="已收藏"){
            console.log(111)
            this.isdisabled=true
          }
          console.log(this.info)
      }) 
    },
    collectionGoods(){
        axios.get('/collection/collectionGoods?goodsId='+ this.id).then(res=>{
           this.info = res;
         this.isdisabled=true          
      }) 
    },
    pay(){
       axios.get('/payment/pays?goodsId='+ this.id).then(res=>{
         this.$message.success(res);
         //跳转首页 正常来说 应该跳到付款页面
           this.$router.push({
                              name:'index',
                              params:{
                                from:'login'
                              }
                           
                          })
       })
    }
  }
}
</script>
<style lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';
  .detail{
    .wrapper{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 1226px;
        margin-right:auto;
        margin-left:auto;
        display:flex;
      .swiper{
        float: left;
        width:642px;
        height:617px;
        margin-top:10px;
        img{
          width:80%;
          height:80%;
        }
      }
      .content{
        float:left;
        width:584px;
        height:870px;
        .item-title{
          font-size:28px;
          padding-top:30px;
          padding-bottom:16px;
          height: 26px;
        }
        .item-info{
          font-size:14px;
          height: 36px;
        }
        .delivery{
          font-size:16px;
          color:#FF6700;
          margin-top:26px;
          margin-bottom:14px;
          height: 15px;
        }
        .item-price{
          font-size:20px;
          color:#FF6700;
          height: 19px;
          .del{
            font-size:16px;
            color:#999999;
            margin-left:10px;
            text-decoration:line-through;
          }
        }
        .line{
          height:0;
          margin-top:25px;
          margin-bottom:28px;
          border-top:1px solid #E5E5E5;
        }
        .item-addr{
          height:108px;
          background-color:#FAFAFA;
          border:1px solid #E5E5E5;
          box-sizing:border-box;
          padding-top:31px;
          padding-left:64px;
          font-size:14px;
          line-height:14px;
          position:relative;
          .icon-loc{
            position: absolute;
            top: 27px;
            left: 34px;
            @include bgImg(20px,20px,'/imgs/detail/icon-loc.png');
          }
          .addr{
            color:#666666;
          }
          .stock{
            margin-top:15px;
            color:#FF6700;
          }
        }
        .item-version,.item-color{
          margin-top:30px;
          h2{
            font-size:18px;
            margin-bottom:20px;
          }
        }
        .item-version,.item-color{
          .phone{
            width:287px;
            height:50px;
            line-height:50px;
            font-size:16px;
            color:#333333;
            border:1px solid #E5E5E5;
            box-sizing: border-box;
            text-align:center;
            cursor:pointer;
            span{
              color:#666666;
              margin-left:15px;
            }
            .color{
              display:inline-block;
              width:14px;
              height:14px;
              background-color:#666666;
            }
            &.checked{
              border:1px solid #FF6600;
              color:#FF6600;
            }
          }
        }
        .item-total{
          height: 108px;
          background: #FAFAFA;
          padding: 24px 33px 29px 30px;
          font-size: 14px;
          margin-top:50px;
          margin-bottom:30px;
          box-sizing: border-box;
          .phone-total{
            font-size: 24px;
            color: #FF6600;
            margin-top: 18px;
          }
        }
      }
    }
    .price-info{
      background-color:#F3F3F3;
      height:340px;
      h2{
        font-size:24px;
        color:#333333;
        padding-top:38px;
        margin-bottom:30px;
      }
    }
    // 评论
    .comment{
         position: relative;
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 1226px;
        margin-right:auto;
        margin-left:auto;
        display:flex;
    }
  }
</style>